<template>
  <div id="payment-container" ref="page">
    <div id="container">
      <div style="background:#fff; " class="order_Text">
        <div style="line-height:40px;">
          <i class="iconfont" style="color:#409EFF;font-size:18px;display: inline-block;"> &#xe693;</i><span>订单详情</span>
        </div>
        <div class="order">
          <p>订单类型:<span>{{entity.purOrderType}}</span></p>
          <p>单据合同编号:<span>{{entity.purBillsId}}</span></p>
          <p>订单金额:<span>{{entity.price}}</span></p>
        </div>
        <div class="order">
          <p>供应商名称:<span>{{entity.supplyName}}</span></p>
          <!--        <li>预计到货日期:{{entity.predictTime}}</li>-->
          <p>订单日期:<span>{{entity.purBillsDate}}</span></p>
          <p>采购公司:<span>{{entity.companyName}}</span></p>
        </div>
        <div class="order">
          <p>收货仓库:<span>{{entity.depotName}}</span></p>
        </div>
      </div>
      <div style="background: #fff;margin-top:5px;" class="order_Text">
        <i class="iconfont" style="color:#409EFF;font-size:16px;display: inline-block;line-height:40px;margin-left:10px;"> &#xe60d;
        &nbsp;<span style="color:#3D3D3D">商品列表</span></i>
        <v-table :tableParams="productList"></v-table>
      </div>
      <div style="background: #fff;margin-top:5px;" class="order_Text">
        <i class="iconfont" style="color:#409EFF;font-size:16px;display: inline-block;line-height:40px;margin-left:5px;">&#xe61a;
          &nbsp;<span style="color:#3D3D3D">财务打款列表</span></i>
        <v-table :tableParams="paymentList"></v-table>
      </div>
      <div style="background: #fff;margin-top:5px;" class="order_Text">
        <i class="iconfont" style="color:#409EFF;font-size:16px;display: inline-block;line-height:40px;margin-left:10px;">&#xe646;
          &nbsp;<span style="color:#3D3D3D">审批信息列表</span></i>
        <v-table :tableParams="remitRecords"></v-table>
      </div>
    </div>
    <div class="btn">
      <el-button @click="backList" size="medium">返回列表页</el-button>
      <el-button @click="printData" size="medium" type="primary">打印凭证</el-button>
    </div>
  </div>
</template>
<script>
  import VTable from "components/common/PageTable/VTable"
  import VForm from "components/common/VForm"
  import {localStorage} from "js/localStorage"

  const purOrderTypeData = {
    '1': '常规订单',
    '2': '集采订单',
    '3': '天猫订单'
  };
  const remitTypeData = {
    '1': '全款',
    '2': '预付款',
    '3': '尾款',
    '4': '质保金',
    '5': '其他'
  };
  export default {
    components: {
      VTable, VForm
    },
    data() {
      return {
        entity: {},
        orderDetailForm: {
          showOperationBtn: false,
          col: 3,
          labelWidth: '120px',
          formItemArray: [{
            label: '订单类型',
            prop: 'purOrderType',
            readonly: true,

            value: ''
          }, {
            label: '单据(合同)编号',
            prop: 'purBillsId',
            readOnly: true,
            value: ''
          }, {
            label: '订单金额',
            prop: 'price',
            readOnly: true,
            value: ''
          }, {
            label: '预计到货日期',
            prop: 'predictTime',
            readOnly: true,
            value: ''
          }, {
            label: '订单日期',
            prop: 'purBillsDate',
            readOnly: true,
            value: ''
          }, {
            label: '采购公司',
            readOnly: true,
            prop: 'companyName',
            value: ''
          }, {
            label: '供应商名称',
            readOnly: true,
            prop: 'supplyName',
            value: ''
          }, {
            label: '收货仓库',
            readOnly: true,
            prop: 'depotName',
            value: ''
          }],
        },
        productList: {
          operationColumnWidth: 180,
          dataArray: [],
          showMultiSelection: false,
          showOperationColumn: false,
          columnArray: [
            {label: '商品名称', prop: 'productName', sortable: false},
            {label: '商品品牌', prop: 'brandCode', sortable: false},
            {label: '商品编码', prop: 'productNo', sortable: false},
            {label: '重量', prop: 'productWeight', sortable: false},
            {label: '进货价(含税运)', prop: 'purchasePrice', sortable: false},
            {label: '采购单价', prop: 'productPrice', sortable: false},
            {label: '采购数量', prop: 'purNumber', sortable: false},
            {label: '采购金额', prop: 'money', sortable: false},
            {label: '其他费用', prop: 'elsePrice', sortable: false},
            {label: '总费用', prop: 'totalPrice', sortable: false},
            {label: '备注', prop: 'memo', sortable: false},
          ],
          rowHandle: {}
        },
        paymentList: {
          operationColumnWidth: 100,
          dataArray: [],
          showMultiSelection: false,
          showOperationColumn: false,
          columnArray: [
            {label: '供应商名称', prop: 'supplyName', sortable: false},
            {label: '开户行', prop: 'supplyAccountName', sortable: false},
            {label: '账号', prop: 'supplyAccount', sortable: false},
            {label: '支付公司', prop: 'companyName', sortable: false},
            {label: '打款金额', prop: 'remitMoney', sortable: false},
            {label: '打款类型', prop: 'remitType', sortable: false},
            {label: '备注', prop: 'approveIdea', sortable: false},
          ],
          rowHandle: {}
        },
        remitRecords: {
          operationColumnWidth: 100,
          dataArray: [],
          showMultiSelection: false,
          showOperationColumn: false,
          columnArray: [
            {label: '发起时间', prop: 'createTime', sortable: false},
            {label: '申请人', prop: 'applyName', sortable: false},
            {label: '审批人', prop: 'userName', sortable: false},
            {label: '审批时间', prop: 'updateTime', sortable: false},
            {label: '审批类型', prop: 'approveType', sortable: false},
            {label: '审批状态', prop: 'approveState', sortable: false},
            {label: '审批意见', prop: 'memo', sortable: false},
          ],
          rowHandle: {}
        },
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        let parmas = {
          purBillsId: this.$route.query.purBillsId,
          id: this.$route.query.id,
          userId: localStorage.get("userID")
        }
        let success = data => {
          if (data.code === "OK") {
            this.entity = data.data.entity
            this.productList.dataArray = data.data.itemList;
            this.productList.dataArray.forEach(item => {
              item.totalPrice = this.calculate.operation(item.money, item.elsePrice, '+');
            });
            this.paymentList.dataArray.push(data.data.remitInfo)
            this.paymentList.dataArray.forEach(ele => {
              ele.remitType = remitTypeData[ele.remitType]
            });
            this.remitRecords.dataArray = data.data.remitRecords;
            this.remitRecords.dataArray.forEach(item => {
              item.createTime = this.formatSystemDate(item.createTime);
              item.updateTime = this.formatSystemDate(item.updateTime);
              switch (item.approveState) {
                case"1" :
                  item.approveState = "待审批";
                  break;
                case"2" :
                  item.approveState = "通过";
                  break;
                case"3" :
                  item.approveState = "驳回";
                  break;
              }
            });

          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.invoiceRemitGetDetail(parmas, success)
      },
      backList() {
        this.$router.go(-1)
      },
      printData() {

        /**
         * 1 获取当前body的所有dom
         * 2 替换当天body中的内容为需要打印的内容
         * 3 打印完成后还原原理body中的dom
         */

        let oldHtml = document.body.innerHTML;
        let printHtml = document.getElementById("container").innerHTML;
        document.body.innerHTML = printHtml;
        window.print();
        document.body.innerHTML = oldHtml;
        window.location.reload();


      },
    }
  }
</script>
<style scoped>
  .el-form-item {
    margin-bottom: 12px !important;
  }
  input {
    border: none !important;
  }
</style>
<style lang="scss" scoped>
  #payment-container {
    .btn {
      width: 100%;
      text-align: center;
      padding-top: 20px;
    }
    .order {
      display: flex;
      line-height: 35px;
      font-size: 15px;
      color: #606266;
      p {
        flex: 1;
        margin-left:10px;

        span {
          color: #666666;
          margin-left: 20px;
          font-size: 14px;
        }
      }

    }
    .order_Text{
      padding:0 10px;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
    }
  }
</style>
